<!-- @format -->

import { useState } from "react";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Icon from "components/Icon";
import Select from "components/Select";

<Meta title="Components/Select" component={Select} />

# Select

## Props

<Props of={Select} />

## Examples

### Basic

Basic usages for `Select` component.

<Preview>
  <Story name="select">
    {() => {
      const options = [
        { value: "CentOS", label: "CentOS 5.8 32bit" },
        { value: "Debian", label: "Debian Jessie 8.1 64bit" },
        {
          value: "Ubuntu",
          label: "Ubuntu Server 14.04.3 LTS 64bit",
          disabled: true,
        },
        { value: "Windows", label: "Windows Server 2003 R2" },
      ];
      const options2 = [
        {
          label: "Cent OS",
          options: [
            { value: "CentOS-5.8", label: "CentOS 5.8 32bit" },
            { value: "CentOS-6.6", label: "CentOS 6.6 64bit", disabled: true },
            { value: "CentOS-7", label: "CentOS 7 64bit" },
          ],
        },
        {
          label: "Debian",
          options: [
            { value: "Debian-8.3", label: "Debian Jessie 8.3 64bit" },
            { value: "Debian-9.3", label: "Debian Stretch 9.3 64bit" },
          ],
        },
      ];
      const options3 = [
        { label: "Last 1 hour", value: 3600 },
        { label: "Last 2 hours", value: 7200 },
        { label: "Last 5 hours", value: 18000 },
        { label: "Last 12 hours", value: 43200 },
        { label: "Last 1 day", value: 86400 },
        { label: "Last 2 days", value: 172800 },
        { label: "Last 3 days", value: 259200 },
        { label: "Last 7 days", value: 604800 },
      ];
      return (
        <>
          <div>
            <p>Normal</p>
            <Select name="select" options={options3} value={43200} />
          </div>
          <div>
            <p>ShowTip</p>
            <Select name="select" options={options3} showTip={true} />
          </div>
          <div style={{ marginTop: "10px" }}>
            <p>Disabled</p>
            <Select name="select" disabled options={options} />
          </div>
          <div style={{ marginTop: "10px" }}>
            <p>Group</p>
            <Select options={options2} name="select" defaultValue="CentOS-7" />
          </div>
          <div style={{ marginTop: "10px" }}>
            <p>Prefix Icon</p>
            <Select
              prefixIcon={<Icon name="cluster" />}
              options={options}
              name="select"
              defaultValue="CentOS"
            />
          </div>
        </>
      );
    }}
  </Story>
</Preview>

### Search Select

<Preview>
  <Story name="select-search">
    {() => {
      const data = Array.from({ length: 60 }, (_, index) => ({
        value: index.toString(),
        label: `Option ${index + 1}`,
      }));
      const [pagination, setPagination] = useState({
        page: 1,
        total: data.length,
        limit: 10,
      });
      const [options, setOptions] = useState(data.slice(0, pagination.limit));
      const [loading, setLoading] = useState(false);
      const handleFetch = ({ name, page = 1 } = {}) => {
        setLoading(true);
        setTimeout(() => {
          setLoading(false);
          setPagination({ ...pagination, page });
          setOptions(
            data
              .filter(
                (item) =>
                  !name ||
                  item.label.toLowerCase().indexOf(name.toLowerCase()) !== -1
              )
              .slice(0, pagination.limit * page)
          );
        }, 500);
      };
      return (
        <Select
          searchable
          name="select-search"
          options={options}
          pagination={pagination}
          onFetch={handleFetch}
          isLoading={loading}
          clearable
        />
      );
    }}
  </Story>
</Preview>

### Multi Select

<Preview>
  <Story name="select-multi">
    {() => {
      const options = [
        { value: "CentOS", label: "CentOS 5.8 32bit" },
        { value: "Debian", label: "Debian Jessie 8.1 64bit" },
        {
          value: "Ubuntu",
          label: "Ubuntu Server 14.04.3 LTS 64bit",
          disabled: true,
        },
        { value: "Windows", label: "Windows Server 2003 R2" },
      ];
      return <Select multi name="select-multi" options={options} showTip/>;
    }}
  </Story>
</Preview>

### Multi Search Select

<Preview>
  <Story name="select-multi-searchable">
    {() => {
      const options = [
        { value: "CentOS", label: "CentOS 5.8 32bit" },
        { value: "Debian", label: "Debian Jessie 8.1 64bit" },
        {
          value: "Ubuntu",
          label: "Ubuntu Server 14.04.3 LTS 64bit",
          disabled: true,
        },
        { value: "Windows", label: "Windows Server 2003 R2" },
      ];
      return <Select multi searchable name="select-multi" options={options} />;
    }}
  </Story>
</Preview>

### Custom Select Render Add Support ShowTip

<Preview>
  <Story name="select-render">
    {() => {
      const options = [
        { value: "CentOS", label: "CentOS 5.8 32bit" },
        { value: "Debian", label: "Debian Jessie 8.1 64bit" },
        {
          value: "Ubuntu",
          label: "Ubuntu Server 14.04.3 LTS 64bit",
          disabled: true,
        },
        { value: "Windows", label: "Windows Server 2003 R2" },
      ];
      const optionRenderer = (option) => (
        <span className="option-with-icon">
          <Icon
            name="cluster"
            style={{ marginRight: 6, verticalAlign: "middle" }}
            type="light"
          />
          <span>{option.label}</span>
        </span>
      );
      const valueRenderer = (option) => (
        <span className="option-with-icon">
          <Icon
            name="cluster"
            style={{ marginRight: 6, verticalAlign: "middle" }}
          />
          <span>{option.label}</span>
        </span>
      );
      return (
        <Select
          name="select-render"
          optionRenderer={optionRenderer}
          valueRenderer={valueRenderer}
          options={options}
          showTip={true}
        />
      );
    }}
  </Story>
</Preview>
